<%= turbo_frame_tag :page_sidebar do %>
  <% tab_selected ||= :content %>
  <h6 class="sidebar-header">
    <%= link_to spree.edit_admin_theme_path(@theme, page_id: @page&.id),  data: { action: 'click->page-builder#clearActiveOverlays' }, class: 'btn hover-gray shadow-none px-2' do %>
      <%= icon 'chevron-left', class: 'mr-0' %>
    <% end %>
    <%= @page_block.display_name %>
  </h6>
  <div class="px-3 pb-5 mb-5 edit-block" style="margin-bottom: 6rem;">
    <%= form_for @page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block), data: { controller: 'auto-submit' }, as: :page_block do |f| %>
      <div data-controller="tabs">
        <ul class="nav nav-pills nav-fill mb-3" id="pills-tab" role="tablist">
          <li class="nav-item" role="presentation">
            <button class="nav-link w-100 <%= tab_selected == :content ? 'active' : '' %>" id="pills-home-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-home" aria-selected="<%= tab_selected == :content %>">Content</button>
          </li>
          <li class="nav-item" role="presentation">
            <button class="nav-link w-100 <%= tab_selected == :design ? 'active' : '' %>" id="pills-profile-tab" data-tabs-target="tab" data-action="click->tabs#select" type="button" role="tab" aria-controls="pills-profile" aria-selected="<%= tab_selected == :design %>">Design</button>
          </li>
        </ul>
        <div data-tabs-target="panel" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" class="animate__animated animate__fadeIn" <%= 'hidden' unless tab_selected == :content %>>
          <%= render "spree/admin/page_blocks/forms/#{@page_block.form_partial_name}", f: f  %>
          <%= render 'spree/admin/page_blocks/form_tab_buttons', tab: :content %>
        </div>
        <div data-tabs-target="panel" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" class="animate__animated animate__fadeIn" <%= 'hidden' unless tab_selected == :design %>>
          <%= render 'spree/admin/page_sections/fields/top_padding', f: f %>
          <%= render 'spree/admin/page_sections/fields/bottom_padding', f: f %>
          <% if @page_block.respond_to?(:preferred_text_color) %>
            <%= render 'spree/admin/page_sections/fields/text_color', f: f %>
          <% end %>
          <% if @page_block.respond_to?(:preferred_background_color) %>
            <%= render 'spree/admin/page_sections/fields/background_color', f: f %>
          <% end %>
          <%= render 'spree/admin/page_sections/fields/button', f: f %>
          <%= yield(:design_tab) %>

          <div class="sidebar-footer">
            <%= link_to_delete(@page_block, url: spree.admin_page_section_block_path(@page_block.section, @page_block)) %>
          </div>
        </div>
      </div>
    <% end %>
  </div>
<% end %>
